<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/news.css" />
    <script src="./lib/jquery.js"></script>
    <script src="./lib/template-web.js"></script>
    <script id="cmt-list" type='text/html'>
        {{each data}}
        <div class="news-item">
            <img src={{ 'http://www.liulongbin.top:3006'+$value.img}} class="thumb" />
            <div class="right-box ">
                <h1 class="title ">{{$value.title}}</h1>
                <div class="tags">
                    {{each $value.tags}}
                    <span>{{$value}}</span> {{/each}}
                </div>
                <div class="footer ">
                    <div>
                        <span>{{$value.source}}</span>&nbsp;&nbsp;
                        <span>{{$value.time|dateFormat}}</span>
                    </div>
                    <span>评论数：{{$value.cmtcount}}</span>
                </div>
            </div>
        </div>
        {{/each}}
    </script>
</head>

<body>

    <div id="news-list">
    </div>
    <script>
        $('#news-list').html(1111111111);

        function addZero(n) {
            if (n < 10) {
                return '0' + n;
            } else {
                return n
            }
        }
        template.defaults.imports.dateFormat = function(date) {
            date = new Date(date)
            var y = date.getFullYear();
            var m = addZero(date.getMonth() + 1);
            var d = addZero(date.getDate());
            var hh = addZero(date.getHours());
            var mm = addZero(date.getMinutes());
            var ss = addZero(date.getSeconds());
            return y + '-' + m + '-' + d + '-' + hh + '-' + mm + '-' + ss;
        }



        function loadNewsList() {
            $.get('http://www.liulongbin.top:3006/api/news', function(res) {
                if (res.status === 200) {
                    res.data.forEach(function(ele) {
                        ele.tags = ele.tags.split(',');
                    });
                    console.log(res);

                    var ret = template('cmt-list', res);
                    $('#news-list').html(ret);
                    // console.log(22222222222);
                }
            })
        }

        loadNewsList();
    </script>
</body>

</html>